<template>
  <div class="bigBox">
    <div class="left">
      <div class="top" ref="leftTop">
        <span class="title">现场地震状况</span>
        <img src="./image/earthquake.jpg" alt="" />
      </div>
      <div class="bottom" ref="leftBottom"></div>
    </div>
    <div class="center" id="floodMap">
      <GDMap />
      <el-table :data="data" style="width: 90%; margin: 0 auto">
        <el-table-column label="预警信息" align="center">
          <template #default="scope">
            <el-text class="mx-1" type="danger">{{ scope.row.name }}</el-text>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="right">
      <div class="top" ref="rightTop"></div>
      <div class="bottom" ref="rightBottom"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import 'echarts-gl' //3D地图插件
import { onMounted, ref } from 'vue'

import myMap from './components/Map.vue'
import GDMap from './components/GDMap.vue'

const data = ref([
  {
    name: '特大暴雨将于3/15日凌晨5点在张家界市落下，请有关人员撤离',
  },
])

const leftTop = ref<HTMLElement>()
const leftBottom = ref<HTMLElement>()
const rightTop = ref<HTMLElement>()
const rightBottom = ref<HTMLElement>()

const cacheCom = new Map<string, HTMLDivElement>()
const initMap = async () => {
  //   const myChart1 = echarts.init(leftTop.value!)
  //   const option1 = {
  //     title: {
  //       text: '近一周降雨量分析',
  //     },
  //     xAxis: {
  //       type: 'category',
  //       data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  //     },
  //     yAxis: {
  //       type: 'value',
  //     },
  //     color: ['#2f89cf'],
  //     series: [
  //       {
  //         data: [120, 200, 150, 80, 70, 110, 130],
  //         type: 'bar',
  //       },
  //     ],
  //   }
  //   myChart1.setOption(option1)
  //   window.addEventListener('resize', () => {
  //     myChart1.resize()
  //   })

  const myChart2 = echarts.init(leftBottom.value!)
  const option2 = {
    // title: {
    //   text: '近几年地震对比图',
    // },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow', // 阴影指示器
      },
    },
    legend: {
      data: ['3级以下地震', '3-5级地震', '5级以上地震'],
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    yAxis: {
      type: 'category',
      data: ['2021', '2022', '2023', '2024', '2025'], // 近几年年份
    },
    xAxis: {
      type: 'value',
      name: '地震次数',
    },
    series: [
      {
        name: '3级以下地震',
        type: 'bar',
        stack: 'total', // 堆叠柱状图
        data: [5, 6, 7, 4, 5], // 3级以下地震次数
        color: '#37A2FF', // 蓝色表示低震级
      },
      {
        name: '3-5级地震',
        type: 'bar',
        stack: 'total',
        data: [2, 3, 2, 4, 3], // 3-5级地震次数
        color: '#FF9F7F', // 橙色表示中震级
      },
      {
        name: '5级以上地震',
        type: 'bar',
        stack: 'total',
        data: [1, 1, 2, 2, 3], // 5级以上地震次数
        color: '#FF0087', // 红色表示高震级
      },
    ],
  }

  myChart2.setOption(option2)
  window.addEventListener('resize', () => {
    myChart2.resize()
  })

  const myChart3 = echarts.init(rightTop.value!)
  const option3 = {
    color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
    title: {
      text: '大模型预测地震趋势',
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985',
        },
      },
    },
    legend: {
      data: ['地震风险指数'],
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: ['12:00', '12:20', '12:40', '13:00', '13:20', '13:40', '14:00'], // 时间轴
      },
    ],
    yAxis: [
      {
        type: 'value',
        name: '风险指数',
        min: 0,
        max: 100,
        axisLabel: {
          formatter: '{value}%',
        },
      },
    ],
    series: [
      {
        name: '地震风险指数',
        type: 'line',
        stack: 'Total',
        smooth: true,
        lineStyle: {
          width: 0,
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: '#FF6B6B', // 浅红色
            },
            {
              offset: 1,
              color: '#FFE66D', // 浅黄色
            },
          ]),
        },
        emphasis: {
          focus: 'series',
        },
        data: [20, 25, 30, 45, 60, 75, 65], // 模拟地震风险指数
      },
    ],
  }

  myChart3.setOption(option3)
  window.addEventListener('resize', () => {
    myChart3.resize()
  })

  const myChart4 = echarts.init(rightBottom.value!)
  const option4 = {
    title: {
      text: '模型预测与实际地震对比',
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      data: ['模型预测地震次数', '实际地震次数', '地震风险指数'],
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['12:00', '12:20', '12:40', '13:00', '13:20', '13:40', '14:00'], // 时间轴，20分钟间隔
    },
    yAxis: {
      type: 'value',
      name: '次数/指数',
    },
    series: [
      {
        name: '模型预测地震次数',
        type: 'line',
        stack: 'Total',
        smooth: true,
        data: [2, 3, 4, 5, 6, 7, 6], // 模型预测的地震次数
        lineStyle: {
          color: '#37A2FF', // 蓝色表示预测
        },
      },
      {
        name: '实际地震次数',
        type: 'line',
        stack: 'Total',
        smooth: true,
        data: [1, 2, 3, 4, 5, 6, 5], // 实际发生的地震次数
        lineStyle: {
          color: '#FF0087', // 红色表示实际
        },
      },
    ],
  }

  myChart4.setOption(option4)
  window.addEventListener('resize', () => {
    myChart4.resize()
  })
}
onMounted(() => {
  // 初始化地图
  initMap()
})
</script>

<style scoped lang="scss">
.bigBox {
  box-sizing: border-box;
  width: calc(100vw - 240px);
  height: calc(100vh - 80px);
  padding: 20px;
  display: flex;
  justify-content: space-between;

  .title {
    color: $primary-color;
    font-weight: bold;
  }

  .left,
  .right {
    width: 420px;
    height: 100%;

    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 20px;

    img {
      width: 400px;
      object-fit: cover;
      height: 300px;
      margin-top: 20px;
    }

    .top,
    .bottom {
      border: 1px solid $primary-border-color;
      border-radius: 10px;
      box-sizing: border-box;
      padding: 20px;
    }
  }

  .center {
    flex: 1;
    height: 300px;
    width: 300px;
  }
}
</style>
